<template>
	<view class="wrap">
		<u-toast ref="uToast" />
		<view style="padding: 40rpx; position: relative;">
			<u-input v-model="content" maxlength="140" type="textarea" :border="border" height="100" :auto-height="autoHeight" />
			<view style="position: absolute; right: 0;  width: 120rpx; height: 60rpx;">{{content.length}}/140</view>
		</view>
		<view class="img">
			<u-upload ref="uUpload" @on-success="bbb" @on-uploaded="aaa" @on-remove="removeFile" :file-list="l" :header="headers"
				:action="action" :auto-upload="true" max-count="9"  :show-progress='imgshow'>
			</u-upload>
		</view>

		<!-- <view class="location" @click="locationTap">
			<view class="left">
				<image class="icon" src="../../static/didian.png"></image>
				<view class="name" v-model="model.location">{{model.location?model.location:"所在位置"}}</view>
			</view>

		</view>
		<view class="privacy" @click="actionSheetShow = true">
			<view class="left">
				<image class="icon" src="../../static/shetuan.png"></image>
				<view class="name">谁可以看</view>
				<view style="position: absolute;right: 0;" v-model="model.privacy">{{model.privacy}}</view>
			</view>
		</view> -->
		<view style="text-align: center;margin-top: 25rpx;">
			<button type="default" class="btn" @click="submit">发表圈子</button>
			<!-- <u-button type="success" size="medium" class="btn" >发表圈子</u-button> -->
		</view>

		<view style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;">
			<image @click="previewImage(index1,list1)" v-for="(res1, index1) in list1" :src="res1.url" mode="aspectFill"
				style="margin-bottom: 10rpx;width:220rpx;height:220rpx;"></image>
		</view>

		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	import http from '@/api/http.js'
	export default {
		data() {

			return {
				formData2: {
					longitude: '',
					latitude: ''
				},
				imgshow:true,
				addressObj: '',
				fileName: [],
				category: 'image',
				content:'',//文本内容
				pics:'',//图片 逗号连接
				l: [],
				list1: [],
				list2: [],
				u_id: '',
				u_name: '',
				u_ava: '',
				u_gender: '',
				model: {
					content: '',
					location: '',
					privacy: '公开'
				},
				// action:  'http://jiaoyou.zheyousoft.cn/api/app/file/upload/element',
				action:  'https://xiuqiu.xiuqiu.cc/api/app/file/upload/element',
				// action:"http://192.168.8.100:9310/file/upload/element",
				headers:{
					'Authorization':'bearer '+uni.getStorageSync('token'),
				},
				list: [],
				autoHeight: true,
				border: false,
				actionSheetShow: false,
				location: '',
				privacy: '公开',
				actionSheetList: [{
						text: '公开'
					},
					{
						text: '仅关注'
					},
					{
						text: '仅自己'
					}
				],
			}
		},
		onShow() {
			this.init();
			console.log(this.action);
		},
		methods: {
			checkMes() {
				console.log("checkMes");
				api.request({
					url: '/mesCheck/getData',
					method: 'GET',
					data: {
						content: this.model.content,
					},
				}).then(res => {
					if (res.errmsg == 'ok') {
						console.log("内容检查成功");
					} else {
						this.$refs.uToast.show({
							title: '内容包含敏感词汇!请检查!',
							type: 'error'
						})
						return;
					}
				});


			},
			//初始化用户信息
			init() {
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						//console.log(res+"sssssssss")
						console.log(res)
						this.u_id = res.data.userId;
						this.u_name = res.data.username;
						this.u_ava = res.data.avatarUrl;
						this.u_gender = res.data.gender;
					}
				})
			},

			//文件上传前执行
			beforeUpload(index, list) {
				console.log(121212);
				// 只上传偶数索引的文件
				for (var i = 0; i < list.length; i++) {
					console.log(list[i].url);
					console.log(list[i].error);
					console.log(list[i].progress);
				}
			},
			//index   图片在数组中索引  data  是上传成功后服务器的回调
			bbb(data, index, lists, name) {
				console.log(121212);
				this.pics+="http://cdn.jiaoyou.zheyousoft.cn/" + data+','
				console.log(this.pics);
			},
			//用户删除了那些图片
			removeFile(index, lists, name) {
				console.log("移除了第" + index + "张图片");
				this.fileName.splice(index, 1)
				console.log(this.fileName + "删除后的文件");
			},
			//图片全部上传完成后执行此方法  
			aaa(e) {
				uni.showToast({
					icon: 'success',
					title: '图片上传成功',
				});
				this.imgshow = false
			
			},
			//图片上传
			submit() {
				//检查敏感词汇
				this.pics=this.pics.substr(0,this.pics.length-1)
				let {content,pics}=this
				console.log(content,pics)
				if (this.content.length  == 0 ) {
					this.$refs.uToast.show({
						title: '内容不能都为空哦！',
						type: 'error'
					})
				} else if(this.pics.length == 0){
					this.$refs.uToast.show({
						title: '内容不能都为空哦！',
						type: 'error'
					})
				}else {
					api.request({
						url: '/p/post-record/save',
						method: 'PUT',
						data: {
							"content": content,
							"pics": pics
						}
					}).then(res=>{
						if(res.statusCode==200){
							console.log(res)
							this.pics=''
							this.content=''
							uni.showToast({
								title: "发布成功",
								icon: "success",
								duration: 1000
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/quanzi/quanzi'
								})
							},1000)
						}
						console.log(res);
					})
				}
			},
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.privacy = this.actionSheetList[index].text;
			},
		
			locationTap() {
			
			},

			openLocationPage() {
				uni.chooseLocation({
					success: res => {
						//console.log(res.name);
						if (res.name) {
							delete res['errMsg'];
							this.model.location = res.name;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		//padding: 40rpx 60rpx;
		width: 100%;
	}

	.img {
		padding: 20rpx;
	}

	.wrap .content {
		font-size: 30rpx;
		width: 100%;
		height: 200rpx;
	}

	.wrap .location {
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 40rpx;
		border-top: 1px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrap .left {
		display: flex;
		font-size: 28rpx;
	}

	.wrap .left .icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 40rpx;
	}

	.btn {
		display: inline-flex;
		width: auto;
		font-size: 13px;
		height: 35px;
		line-height: 35px;
		padding: 0 40px;
		color: #ffffff;
		border-color: #19be6b;
		background-color: #19be6b;
	}

	.privacy {
		margin-left: 40rpx;
		margin-right: 40rpx;
		//margin-top: 40rpx;
		//border-top: 1px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			font-size: 28rpx;
			width: 100%;
			position: relative;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 40rpx;
		}
	}
</style>
